<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <canvas id="canvas"></canvas> -->
    <button>capture</button>
    <video></video>
    <canvas width="0" height="0"></canvas>
    <script>
        // const canvas = document.querySelector('canvas')
        // const context = canvas.getContext('2d')
        const video = document.querySelector('video')
        const button = document.querySelector('button')
        button.addEventListener('click', () => {
            navigator.mediaDevices.getUserMedia({ video: {
                width: 640,
                height: 480,
    // aspectRatio?: ConstrainDouble;
    // autoGainControl?: ConstrainBoolean;
    // channelCount?: ConstrainULong;
    // deviceId?: ConstrainDOMString;
    // echoCancellation?: ConstrainBoolean;
    // facingMode?: ConstrainDOMString;
    // frameRate?: ConstrainDouble;
    // groupId?: ConstrainDOMString;
    // height?: ConstrainULong;
    // latency?: ConstrainDouble;
    // noiseSuppression?: ConstrainBoolean;
    // resizeMode?: ConstrainDOMString;
    // sampleRate?: ConstrainULong;
    // sampleSize?: ConstrainULong;
    // width?: ConstrainULong;
            } }).then(function (stream) {
                // context.drawImage(stream, 0, 0)
                let startDate
                video.srcObject = stream
                video.muted = true
                video.playsInline = true
                let canvas = document.querySelector('canvas')
                let context = canvas.getContext('2d')
                video.addEventListener('play', () => {
                    console.log(video)
                    const setCanvasSize = () => {
                        if (canvas.width !== video.videoWidth) {
                            canvas.width = video.videoWidth
                            canvas.height = video.videoHeight

                            setTimeout(() => { recorder.stop() }, 5000)
                        }
                    }
                    setInterval(() => {
                        if (video.videoHeight > 0 && video.videoWidth > 0) {
                            setCanvasSize()
                            context.drawImage(video, 0, 0)
                        }
                    }, 40);
                    const stream = canvas.captureStream(25)
                    const recorder = new MediaRecorder(stream)
                
                    let recordBuffer = []
                    recorder.ondataavailable = (e) => {
                        console.log(e, new Date().getTime())
                        if (e.data.size) {
                            recordBuffer.push(e.data)
                        }
                    }
                    recorder.onstop = (e) => {
                        console.log(e, new Date().getTime())
                        console.log(new Date() - startDate)
                        console.log(recordBuffer.length)
                        alert(Number(recordBuffer.reduce((a, b) => {
                            return a.size + b.size
                        }, { size: 0 }) / 1024).toFixed(2) + 'kb')
                        
                        let url = URL.createObjectURL(new Blob(recordBuffer))

                        let link = document.createElement('a')
                        link.download = `${new Date().getTime()}.webm`
                        link.href = url
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }
                    recorder.start()
                    startDate = new Date()
                })

                video.play()
                
                // const recorder = new MediaRecorder(stream)
                
                // let recordBuffer = []
                // recorder.ondataavailable = (e) => {
                //     console.log(e, new Date().getTime())
                //     if (e.data.size) {
                //         recordBuffer.push(e.data)
                //     }
                // }
                // recorder.onstop = (e) => {
                //     console.log(e, new Date().getTime())
                //     console.log(new Date() - startDate)
                //     console.log(recordBuffer.length)
                //     alert(Number(recordBuffer.reduce((a, b) => {
                //        return a.size + b.size
                //     }, { size: 0 }) / 1024).toFixed(2) + 'kb')
                //     // let url = URL.createObjectURL(new Blob(recordBuffer))

                //     // let link = document.createElement('a')
                //     // link.download = `${new Date().getTime()}.webm`
                //     // link.href = url
                //     // document.body.appendChild(link)
                //     // link.click()
                //     // document.body.removeChild(link)
                // }
                // recorder.start()
                // startDate = new Date()
                // setTimeout(() => { recorder.stop() }, 5000)
            }).catch(function (err) {
                console.log(err)
            })
        })
    </script>
</body>

</html>